<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
  <view class="content">
    <!-- :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
    <!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
    <z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" :fixed="false" @query="queryList">
      <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
      <view v-for="(item, index) in dataList" :key="index" class="item">
        <view class="item-title">
          {{ item.title }}
        </view>
        <view class="item-detail">
          {{ item.detail }}
        </view>
        <view class="item-line" />
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';

// import useZPaging from "z-paging/components/z-paging/js/hooks/useZPaging.js";
const props = defineProps({
  tabIndex: {
    type: Number,
    default: 0,
  },
  currentIndex: {
    type: Number,
    default: 0,
  },
});
const paging = ref(null);

const dataList = ref([]);
// 当前组件是否已经加载过了
const firstLoaded = ref(false);
// 是否滚动到当前页
const isCurrentPage = ref(false);

watch(() => props.currentIndex, (newVal) => {
  if (newVal === props.tabIndex) {
    // 懒加载，当滑动到当前的item时，才去加载
    if (!firstLoaded.value) {
      // 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
      setTimeout(() => {
        isCurrentPage.value = true;
      }, 100);
    }
  }
}, {
  immediate: true,
});

// const queryList = (pageNo, pageSize) => {
//     const params = {
//         pageNo: pageNo,
//         pageSize: pageSize,
//         type: props.tabIndex + 1
//     };

//     request.queryList(params).then(res => {
//         paging.value.complete(res.data.list);
//         firstLoaded.value = true;
//     }).catch(res => {
//         paging.value.complete(false);
//     });
// };
function queryList(pageNo, pageSize) {
  console.log('[ pageNo ] >', pageNo);
  console.log('[ pageSize ] >', pageSize);
  // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  // 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过pagingRef.value.complete(请求回来的数组)将请求结果传给z-paging
  setTimeout(() => {
    // 1秒之后停止刷新动画
    const list = [];
    for (let i = 0; i < 30; i++) {
      // list.push(urls[uni.$u.random(0, urls.length - 1)]);
      list.push({
        title: (i + 1).toString(),
        detail: `测试信息${props.tabIndex.value + 1}`,
      });
    }

    paging.value?.complete(list);
    firstLoaded.value = true;
  }, 1000);
  // this.$request
  //   .queryList({ pageNo, pageSize })
  //   .then(res => {
  //     // 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
  //     pagingRef.value.complete(res.data.list);
  //   })
  //   .catch(res => {
  //     // 如果请求失败写pagingRef.value.complete(false)，会自动展示错误页面
  //     // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
  //     // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
  //     pagingRef.value.complete(false);
  //   });
}
</script>

<style>
    /* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
    .content {
        height: 100%;
    }

    .item {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0rpx 30rpx;
        height: 150rpx;
    }

    .item-detail {
        padding: 5rpx 15rpx;
        font-size: 28rpx;
        color: white;
        background-color: #007AFF;
        border-radius: 10rpx;
    }

    .item-line {
        position: absolute;
        bottom: 0rpx;
        left: 0rpx;
        width: 100%;
        height: 1px;
        background-color: #eee;
    }
</style>
